<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell title="我的频道" class="my-cell" :border="false">
      <span slot="tittle" class="left-tittle">我的频道</span>
      <van-button size="mini" round type="danger" plain @click="isEdit = !isEdit">
        {{ isEdit ? '完成': '编辑' }}</van-button>
    </van-cell>
    <!-- 我的频道列表 -->
    <van-grid class="list-grid my-grid" :gutter="10">
      <van-grid-item :class="{active: index === active}" v-for="(item,index) in channels" :key="item.id"
        @click="onMyChannelClick(item, index)" :icon="isEdit && index!==0?'close':''" :text="item.name" />
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell title="频道推荐" class="edit-cell" :border="false">
      <span slot="tittle" class="left-tittle">频道推荐</span>
    </van-cell>
    <van-grid :gutter="10" class="recommend-grid" direction='horizontal'>
      <van-grid-item class="channel-item" v-for="(channel,index) in recommendChannels" :key="index" :text="channel.name"
        @click="onAddChannel(channel)" icon="plus" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  name: 'ChannelEdit',
  data () {
    return {
      // 全部列表
      allChannels: [],
      // 编辑按钮
      isEdit: false
    }
  },
  props: {
    channels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }

  },
  methods: {
    // 获取全部频道列表
    async loadAllChannels () {
      try {
        const { data: res } = await getAllChannels()
        // console.log(res)
        this.allChannels = res.data.channels
        console.log(this.allChannels)
      } catch (err) {
        this.$toast('获取全部频道列表数据失败')
      }
    },
    // 点击推荐列表
    async onAddChannel (channel) {
      this.channels.push(channel)
      if (this.user) {
        console.log('存到数据库')
        try {
          await addUserChannel({
            id: channel.id, // 频道 id
            seq: this.channels.length// 频道的 序号
          })
          this.$toast('添加成功')
        } catch (err) {
          this.$toast('保存失败')
        }
      } else {
        setItem('hmtt-channel', this.channels)
      }
    },
    // 点击我的频道
    onMyChannelClick (item, index) {
      if (this.isEdit) {
        // 执行删除操作
        // 判断是否为推荐
        if (index === 0) return
        if (index < this.active) {
          this.$emit('sendData', {
            close: true,
            index: this.active - 1
          })
        }
        this.channels.splice(index, 1)
        // 删除数据持久化
        this.deleteChannel(item)
      } else {
        // 执行跳转操作
        this.$emit('sendData', {
          close: false,
          index
        })
      }
    },
    // 删除频道
    async deleteChannel (channel) {
      try {
        if (this.user) {
          // 已登录，将数据存储到线上
          await deleteUserChannel(channel.id)
        } else {
          // 未登录，将数据存储到本地
          setItem('channles', this.userChannels)
        }
        this.$toast('删除频道成功')
      } catch (err) {
        console.log(err)
        this.$toast('删除频道失败，请稍后重试')
      }
    }
  },
  computed: {
    recommendChannels () {
      return this.allChannels.filter(item => {
        return !this.channels.find(mychannel => item.id === mychannel.id)
      })
    },
    // 获取user
    ...mapState(['user'])
  },
  watch: {},
  filters: {},
  components: {},
  created () {
    this.loadAllChannels()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.channel-edit {
  padding-top: 60px;
  .channel-item {
    height: 86px;
    /deep/ .van-grid-item__content {
      border-radius: 6px;
      background-color: #f5f5f6;
      &::after {
        border: none;
      }
      .van-grid-item__text {
        color: #222;
      }
    }
  }
  // 我的频道宫格
  /deep/.my-grid {
    .van-grid-item__icon,
    .van-grid-item__text {
      margin-top: 0;
      margin-left: 0;
    }
    .van-icon-close {
      font-size: 34px;
      position: absolute;
      right: -13px;
      top: -13px;
      color: #333 !important;
    }
    .active {
      .van-grid-item__text {
        color: red;
      }
    }
  }
  /deep/ .list-grid {
    .van-grid-item {
      height: 86px;
      .van-grid-item__content {
        background-color: #f4f5f6;
        border-radius: 6px;
        &::after {
          border: none;
        }
      }
    }
  }

  .my-cell,
  .edit-cell {
    align-items: center;
    .left-tittle {
      font-size: 32px;
      color: #333;
    }
  }
  .van-button--plain {
    padding: 5px 20px;
  }
  /deep/ .recommend-grid {
    .van-grid-item__content--horizontal
      .van-grid-item__icon
      + .van-grid-item__text {
      margin-left: 0;
    }
    .van-grid-item__content {
      padding: 0;
      .van-icon {
        &::before {
          font-size: 24px;
          color: #222;
          margin-bottom: 32px;
        }
      }
    }
  }
  /deep/ .van-icon-close {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 36px;
    color: #ccc !important;
  }
  body .van-icon {
    color: #ccc !important;
  }
}
</style>
